<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 350px; height: 500px;">
    <div style="position: relative; border: 1px solid #F0F0F0; width: 100%; height: 100%; padding: 10px;">
        <div style="width: calc(100% - 20px); height: calc(100% - 70px); position: absolute; border: 1px solid #F0F0F0; overflow-y:auto;">
            <ul id="chatMsgContent" style="padding-inline-start: 10px;">
                <li style="list-style: none;">
                    <span style="color: cornflowerblue;">张三：</span>
                    <span>123asa阿三打撒打撒打撒打撒打撒萨达萨达萨达是啊实打阿三大苏打实打实大苏打萨达萨达萨达是实的撒da1</span>
                </li>
            </ul>
        </div>
        <div style="width: 100%; height: 50px; position: absolute; bottom: 0px;">
            <textarea id="chatMsgText" style="width: 80%; vertical-align: bottom;"></textarea>
            <input type="button" value="发送" style="vertical-align: bottom;" onclick="sendChatMsgText()">
        </div>
    </div>
</div>
</body>
<script>
    function sendChatMsgText() {
        let newMessage = document.createElement('li');
        newMessage.style.listStyle = 'none';
        newMessage.innerHTML = `<span style="color: cornflowerblue;">张三：</span><span>${document.getElementById("chatMsgText").value}</span>`;
        let chatContent = document.getElementById("chatMsgContent");
        chatContent.appendChild(newMessage);
        sendMsg(document.getElementById("chatMsgText").value);
        document.getElementById("chatMsgText").value = '';
        // 滚动到最底部
        chatContent.parentNode.scrollTop = chatContent.parentNode.scrollHeight;
    }
    function sendMsg(msg) {
        WEB_SOCKET_UTILS.send(`chat:${msg}`);
    }
</script>
</html>
